<template>
  <div class="rigester" >
    <div class="main" v-if="reload">
      <el-steps :active="active" finish-status="success">
        <el-step title="绑定手机号"></el-step>
        <el-step title="填写账号信息"></el-step>
        <el-step title="注册成功"></el-step>
      </el-steps>
      <div class="main-content">
        <div v-if="active === 0">
          <el-form ref="FirstForm" :model="form.Form1" :rules="rules.Rules1" status-icon>
            <el-form-item prop="user_phone" label="手机号">
              <el-input v-model="form.Form1.user_phone" placeholder="输入手机号" />
            </el-form-item>
            <el-form-item prop="user_phone_check" label="验证码">
              <div :style="{display: 'flex'}">
                <el-input v-model="form.Form1.user_phone_check" placeholder="输入您收到的验证码" />
                <el-button v-model="codeTime" @click="handleGetPhoneCode" :style="{marginLeft: '10px'}">
                  获取验证码{{loading ? `(${codeTime})`: null}}
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="active === 1">
          <el-form ref="SecondForm" :model="form.Form2" :rules="rules.Rules2" status-icon >
            <el-form-item prop="user_name" label="用户名">
              <el-input v-model="form.Form2.user_name" placeholder="你的用户名" />
            </el-form-item>
            <el-form-item prop="user_password" label="登录密码">
              <el-input type="password" v-model="form.Form2.user_password" placeholder="输入登录密码" />
            </el-form-item>
            <el-form-item prop="user_twice_password" label="确认密码">
              <el-input type="password" v-model="form.Form2.user_twice_password" placeholder="输入确认密码" />
            </el-form-item>
            <el-form-item prop="user_email" label="邮箱">
              <el-input v-model="form.Form2.user_email" placeholder="输入邮箱" />
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="active === 3">
          <div class="success">
            <i class="iconfont icon-smile" />
            <p>你已注册成功,快去天鹿市场看看吧!</p>
          </div>
        </div>
        <div :style="{ display: 'flex' }">
          <el-button type="primary" @click="handleNext" v-if="active !== 3">下一步</el-button>
          <el-button type="primary" @click="handleBack" v-if="active !== 0 && active !== 3">返回</el-button>
        </div>
      </div>
    </div>
    <div class="registerFooter">
      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from '@/components/Footer'
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
  name: '',
  components: {
    Footer
  },
  computed: {
    ...mapState({
      active: state => state.user.active,
    })
  },
  data () {
    let checkphone = (rule ,value, callback) => {
      let reg =/(^1([3|4|5|7|8|])\d{9}$)/;
      if (!reg.test(value)) {
          return callback(new Error('手机号格式错误。'));
      }else{
          callback();
      }
    };
    let checkTwice = (rule ,value, callback) => {
      if (value!==this.form.Form2.user_password) {
          return callback(new Error('与登录密码不一致。'));
      }else{
          callback();
      }
    };
    let checkName = (rule ,value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空!'));
      }else{
        this.fetchCheckUser({user_name: value}).then(res => {
          const { code } = res;
          if(code === 100){
            callback(new Error('用户名已存在。'))
          }else{
            callback();
          }
        })
      }
    };
    return {
      logoUrl: require('@/assets/logo.png'),
      avaUrl: '',
      form: {
        Form1: {
          user_phone: '',
          user_phone_check: ''
        },
        Form2: {
          user_name: '',
          user_password: '',
          user_twice_password: '',
          user_email: '',
        }
      },
      rules: {
        Rules1: {
          user_phone: [
            { required: true, message: '请输入您的手机号', trigger: 'change' },
            { validator: checkphone, trigger: 'change' },
          ],
          user_phone_check: [
            { required: true, message: '输入收到的验证码', trigger: 'change' },
          ],
        },
        Rules2: {
          user_name: [
            { required: true, message: '请输入您的登录账号名', trigger: 'change' },
            { min: 6, message: '最小长度为6', trigger: 'change'},
            { max: 12, message: '超过在大长度12', trigger: 'change'},
            { validator: checkName, trigger: 'change' },
          ],
          user_password: [
            { required: true, message: '请输入您的登录密码', trigger: 'change' },
            { min: 6, message: '最小长度为6', trigger: 'change'},
            { max: 12, message: '超过在大长度12', trigger: 'change'},
          ],
          user_twice_password: [
            { required: true, message: '请再次输出您的登录密码', trigger: 'change' },
            { validator: checkTwice, trigger: 'change' },
          ],
          user_email: [
            { required: true, message: '请输入您的邮箱',trigger: 'change' },
            { type: 'email', message: '邮箱格式错误。'}
          ],
        }
      },
      codeTime: 60,
      loading: false,
      reload: true,
    };
  },
  methods: {
    ...mapMutations({
      changeActive: 'user/changeActive'
    }),
    ...mapActions({
      fetchRegister: 'user/fetchRegister',
      fetchCheckUser: 'user/fetchCheckUser'
    }),
    handleNext () {
      if(this.active === 0){
        this.$refs.FirstForm.validate((valid) => {
          if(valid){
            this.changeActive(1);
            this.reload = false;
            this.$nextTick(function(){
              this.reload = true;
            })
          }else{
            return false;
          }
        });
      }else if(this.active === 1){
        this.$refs.SecondForm.validate((valid) => {
          if(valid){
            let obj = {
              user_name: this.form.Form2.user_name,
              user_password: this.form.Form2.user_password,
              user_phone: this.form.Form1.user_phone,
              user_email: this.form.Form2.user_email
            };
            this.fetchRegister(obj);
          }else{
            return false;
          }
        })
      }
    },
    handleBack () {
      this.reload = false;
        this.$nextTick(function(){
          this.reload = true;
      })
      if (this.active === 0) return;
      this.changeActive(this.active - 1)
    },
    handleAvatarSuccess (res, file) {
      this.avaUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleGetPhoneCode(){
      if(this.loading){
        return false;
      }else{
        this.loading = true;
        let timer = setInterval(()=>{
          this.codeTime -= 1;
          if(this.codeTime === 0){
            this.codeTime = 60;
            this.loading = false;
            clearInterval(timer);
          }
        },1000);
      }
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
  .main{
    input {
      border: 1px solid #888 !important;
    }
    .el-form-item__error{
          width: 100%;
          display: inline-block;
          font-size: 16px;
        }
        .el-input__suffix{
          font-size: 20px;
          color: $theme-color;
        }
    .el-form-item__label {
      width: 85px;
      text-align: left;
    }
    .el-button--primary {
      width: 220px;
      display: block;
      margin: 0 auto;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #888;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: $theme-color;
      .el-icon-plus:before {
        color: $theme-color;
      }
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .avatar {
      width: 120px;
      height: 120px;
      display: block;
    }

  }
  .registerFooter{
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    .Footer-2{
        display: none!important;
      }
  }
</style>